<template>
  <div class="h5-wrapper">
    <div class="content">
      <!-- 内容部分 -->
      <router-view ></router-view>
    </div>
    <nav class="tabbar">
      <router-link to="/home/article">面经</router-link>
      <router-link to="/home/collect">收藏</router-link>
      <router-link to="/home/like">喜欢</router-link>
      <router-link to="/home/user">我的</router-link>
    </nav>
  </div>
</template>

<script>
// @ is an alias to /src
// 请求地址: https://mock.boxuegu.com/mock/3083/articles
// 请求方式: get
import axios from 'axios'
export default {
  name: 'LayoutPage',
  data () {
    return {
      articles: []
    }
  },
  created () {
    this.getArticles()
  },
  methods: {
    async getArticles () {
      const data = await axios.get('https://mock.boxuegu.com/mock/3083/articles')
      this.articles = data.data.result.rows
      console.log(this.articles)
    }
  }
}
</script>

<style scoped lang="less">
.h5-wrapper {
  user-select: none;
    margin-bottom: 51px; /* 确保内容区下方有足够的空间留给.tabbar */
    min-height: calc(100vh - 50px - 44px); /* 减去.tabbar和.nav的高度 */
    max-height: calc(100vh - 50px - 44px); /* 同上 */
    overflow-y: auto; /* 当内容超出.max-height时，内容区内部显示滚动条 */ /* 确保计算包括边框和填充 */

  .content {
    flex-grow: 1;
    max-height: calc(100vh - 60px); /* 假设.navbar高度为60px */
      overflow-y: auto;
      padding: 20px;
      box-sizing: border-box;
  }
  .tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content:  space-around;
    background-color: #f8f9fa;
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
    a {
      text-decoration: none; /* 移除下划线 */
      color: inherit; /* 继承父元素的颜色 */
      outline: none; /* 移除键盘聚焦时的轮廓 */
      user-select: none;

    }
    a.router-link-active {
      color: orange;
    }
  }

}
</style>
